<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>jQuery LiveTwitter Demo</title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" ></script>
	<script src="jquery.livetwitter.js" type="text/javascript"></script>
	<style type="text/css" media="screen">
		body {
			background: #E1EBFF;
			font-family: Verdana;
			font-size: 13px;
			color: #111;
			margin: 40px 120px;
			line-height: 1.4;
		}
		h2 {
			margin-top: 40px;
			font-family: Helvetica, Arial, sans-serif;
			font-size: 24px;
			font-weight: bold;
		}
		a, a:visited {
			color: #066999;
		}
		a:hover {
			color: #111;
		}
		.tweet {
			background: #fff;
			margin: 4px 0;
			width: 500px;
			padding: 8px;
			-moz-border-radius: 8px;
			-webkit-border-radius: 8px;
		}
		.tweet img {
			float: left;
			margin: 0 8px 4px 0;
		}
		.tweet .text {
			margin: 0;
		}
		.tweet .time a {
			font-size: 80%;
			color: #888;
			white-space: nowrap;
			text-decoration: none;
		}
		.tweet .time a:hover {
			text-decoration: underline;
		}
		#twitterSearch .tweet {
			min-height: 24px;
		}
		#twitterSearch .tweet .text {
			margin-left: 32px;
		}
	</style>
</head>
<body>

	<h2>Searching for <em<span id="searchTerm">bacon</span></em>..</h2>
	<div id="twitterSearch" class="tweets"></div>
	<p id="searchLinks">Change to: <a href="#">bacon</a>, <a href="#">pasta</a> or <a href="#">celery</a>.</p>

	<h2>User timeline for <a href="http://twitter.com/elektronaut">@elektronaut</a></h2>
	<div id="twitterUserTimeline" class="tweets"></div>

	<script type="text/javascript">

		// Basic usage
		$('#twitterSearch').liveTwitter('bacon', {limit: 5, rate: 5000});
		$('#twitterUserTimeline').liveTwitter('elektronaut', {limit: 5, refresh: false, mode: 'user_timeline'});

		// Changing the query
		$('#searchLinks a').each(function(){
			var query = $(this).text();
			$(this).click(function(){
				// Update the search
				$('#twitterSearch').liveTwitter(query);
				// Update the header
				$('#searchTerm').text(query);
				return false;
			});
		});

	</script>
</body>
</html>
